

import 'package:containerbox_study/CommonUI/form_input.dart';
import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget{
  // LoginPage({required Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => Loginstate();
}

class Loginstate extends State <LoginPage>{
  // TextEditingController _usernameController = TextEditingController();
  // TextEditingController _passwordController = TextEditingController();
  // String _username = '', _password = '';

  Map<String, Map<String, Object>> _formData = {
    'username' : {
      'value' : '',
      'controller' : TextEditingController(),
      'obsecur' : true,
    },
    'password' : {
      'value' : '',
      'controller' : TextEditingController(),
      'obsecur' : false,
    }
  };
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
          onTap: (){
          print('点击了空白');
          //键盘收起控件
          FocusScopeNode currentNode = FocusScope.of(context);
          if (!currentNode.hasPrimaryFocus && currentNode.focusedChild != null){
              FocusManager.instance.primaryFocus!.unfocus();
          }
      },
      child: Scaffold(

        appBar: AppBar(
        title: Text('登陆'),
        ),
        body: Container(
          margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
          child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            _logoImage('images/logo.png', 80),
            SizedBox(
              height: 60,
            ),
            // _usernameTextFiled(),
            FormUntil.textfiled(
              'username',
              _formData['username']!['value'].toString(),
              controller: _formData['username']!['controller'],
              hintText: '请输入账号',
              prefixIcon: Icons.mobile_friendly,
              onChanged: _handTextfiledChange,
              onClear: _handTextFiledClear,
            ),
            SizedBox(height: 15,),
            // _passwordTextFiled(),
            FormUntil.textfiled(
              'password',
              _formData['password']!['value'].toString(),
              controller: _formData['password']!['controller'],
              hintText: '请输入密码',
              obscureText: true,
              prefixIcon: Icons.lock_open,
              onChanged: _handTextfiledChange,
              onClear: _handTextFiledClear,
            ),
            SizedBox(height:10),
            _getLoginButton(),
          ],
        ),
      ),

      ),
    );
  }

  _handTextfiledChange(String formKey, String value){
    this.setState(() {
      print(formKey);
      _formData[formKey]!['value'] = value;
    });
  }

  _handTextFiledClear(String formKey){
    this.setState(() {
      (_formData[formKey]!['controller'] as TextEditingController).clear();
      _formData[formKey]!['value'] = '';
    });
  }


  Widget _logoImage(String imageName, double size){
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(size / 2),
        color: Colors.white
      ),
      //裁剪
      clipBehavior: Clip.antiAlias,
      child: Image.asset(imageName),
    );
  }

/*
  Widget _getInputTextFiled(
    TextInputType textInputType,
    {
      controller : TextEditingController, 
      onChanged: Function,
      height = 50.0,
      FocusNode? focusNode, 
      InputDecoration? decoration,
      bool obscureText = false,
    }
  ){
    return Container(
      height: height,
      margin: EdgeInsets.all(10),
      child: Column(
        children: [
          TextField(
            keyboardType: textInputType,
            focusNode: focusNode,
            decoration: decoration,
            obscureText: obscureText,
            controller: controller,
            onChanged: onChanged,
          ),
          Divider(
            height:1.0,
            color: Colors.grey[400],
          )
        ],
      ),
    );
  }
*/
/*
  Widget _usernameTextFiled(){
    return _getInputTextFiled(
      TextInputType.number,
      controller: _usernameController,
      decoration: InputDecoration(
        hintText: '请输入账号',
        icon: Icon(
            Icons.mobile_friendly_rounded,
            size: 20,
        ),
        //清除输入的文本
        suffixIcon: GestureDetector(
          child: Offstage(
            child: Icon(Icons.clear),
            offstage: _username == '',
          ),
          onTap: (){
            this.setState(() {
              _username = '';
              _usernameController.clear();
            });
          },
        ),   
      ),
      onChanged: (value){
        this.setState(() {
          _username = value;
        });
      }
      );
  }
*/
/*
  Widget _passwordTextFiled(){
    return _getInputTextFiled(
      TextInputType.number,
      controller: _passwordController,
      decoration: InputDecoration(
        hintText: '请输入密码',
        icon: Icon(
          Icons.lock_open,
          size: 20,
        ),
        suffixIcon: GestureDetector(
          child: Offstage(
            child: Icon(Icons.clear),
            offstage: _password == '',
          ),

          onTap: (){
            this.setState(() {
              _password = '';
              _passwordController.clear();
            });
          },
        ),
      ),
      onChanged: (value){
        this.setState(() {
          _password = value;
        });
      }
    );
  }
*/
  Widget _getLoginButton(){
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(15),
      height: 50,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4.0),
        color: Colors.blue,
      ),
      child: TextButton(child: Text('登陆', style: TextStyle(color: Colors.white),), onPressed: _login,),
    );
  }

  void _login(){
    // print('username = $_username  password = $_password');
    print('''请输出 用户名: ${(_formData['username']!['value'])}, 密码${(_formData['password']!['value'])}''');
  }

}